<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      function createDirectLineForTest(options) {
        const CONNECTING = 1;
        const ONLINE = 2;
        const reconnectingDirectLine = WebChat.createDirectLine(options);

        return {
          activity$: reconnectingDirectLine.activity$,
          postActivity: reconnectingDirectLine.postActivity.bind(reconnectingDirectLine),

          connectionStatus$: new Observable(observer => {
            const subscription = reconnectingDirectLine.connectionStatus$.subscribe({
              complete: () => observer.complete(),
              error: err => observer.error(err),
              next: connectionStatus => {
                observer.next(connectionStatus);
                connectionStatus === ONLINE && observer.next(CONNECTING);
              }
            });

            return () => subscription.unsubscribe();
          })
        };
      }

      run(async function () {
        const clock = lolex.createClock();

        WebChat.renderWebChat(
          {
            directLine: createDirectLineForTest({ token: await testHelpers.token.fetchDirectLineToken() }),
            ponyfill: clock,
            store: testHelpers.createStoreWithOptions({ ponyfill: clock }),
            styleOptions: { spinnerAnimationBackgroundImage: 'url(/assets/staticspinner.png)' }
          },
          document.getElementById('webchat')
        );

        await pageConditions.actionDispatched('DIRECT_LINE/RECONNECT_PENDING');

        clock.tick(15000); // "Connecting" will be gone after 400ms

        await host.snapshot();
      });
    </script>
  </body>
</html>
